<%@page contentType="text/html; charset=UTF-8"%>
<%@taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles"%>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html"%>
<%@include file="/common/definition.jsp"%>
<%@ page language="java" import="java.util.*"%>

<html:html>
<tiles:insert beanName="default-product" flush="true">
	<tiles:put name="title"> Welcome </tiles:put>
	<tiles:put name="body" type="string">

		<div class="container">
			<div class="row" style="padding-top: 50px;">
				<div class="col-md-2"></div>
				<div class="col-md-8 mainHome">
					<s:form action="shopRegister" cssClass="form-horizontal"
						theme="simple" role="form">
						<div class="col-md-12 text-center">
							<h1>Đăng ký cửa hàng</h1>
						</div>
						<s:if test="errorAccount == null && errorEmail == null && registerSuccess == null && errorPhoneNumber == null">
						</s:if>
						<s:elseif test="errorAccount != null || errorEmail != null">
							<div class="error_box" style="display: block;">
								<s:property value="errorAccount" />
								<br />
								<s:property value="errorEmail" />
								<br />
								<s:property value="errorPhoneNumber" />
							</div>
						</s:elseif>
						<s:elseif test="registerSuccess != null">
							<div class="success_box" style="display: block;">
								<s:property value="registerSuccess" />
							</div>
						</s:elseif>
						<div class="col-sm-offset-3 col-sm-9 paddingAlert">
							<div class="error_box"></div>
						</div>
						<div class="form-group">
							<div class="col-sm-9">
								<p><s:property value="registerSuccess"/></p>
								<p><s:property value="errorAccount"/></p>
								<p><s:property value="errorEmail"/></p>
								<p><s:property value="errorPhoneNumber"/></p>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label">Tên cửa hàng</label>
							<div class="col-sm-9">
								<s:textfield name="shopInfo.agentName"
									cssClass="form-control" placeholder="Tên cửa hàng"></s:textfield>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label">Địa chỉ</label>
							<div class="col-sm-9">
								<s:textfield name="shopInfo.address"
									cssClass="form-control" placeholder="Địa chỉ" />
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label">Số điện thoại cửa
								hàng</label>
							<div class="col-sm-9">
								<s:textfield name="shopInfo.phoneNumber"
									cssClass="form-control" placeholder="Số điện thoại" />
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label">Email cửa hàng</label>
							<div class="col-sm-9">
								<s:textfield name="shopInfo.agentEmail"
									cssClass="form-control" placeholder="Email" />
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label">Website</label>
							<div class="col-sm-9">
								<s:textfield name="shopInfo.agentWebsite"
									cssClass="form-control" placeholder="Website" />
							</div>
						</div>

						<div class="row form-group">
							<div class="col-sm-6 text-right">
								<button type="submit" class="btn btn-default"
									onclick="this.register.reset();">Đăng ký</button>
							</div>
							<div class="col-sm-6 text-left">
								<button type="reset" class="btn btn-default">Nhập lại</button>
							</div>
						</div>
					</s:form>
					<script type="text/javascript">
					var validator = new FormValidator('shopRegister', 
					[{
						name: 'shopInfo.agentName',  
						display: 'tên cửa hàng',
						rules: 'required|min_length[6]|max_length[20]'
					},{
						name: 'shopInfo.address',  
						display: 'địa chỉ',
						rules: 'required|min_length[6]|max_length[150]'
					},{
						name: 'shopInfo.phoneNumber',  
						display: 'số điện thoại',
						rules: 'required|is_natural|min_length[1]|max_length[14]'
					},{
						name: 'shopInfo.agentEmail',  
						display: 'email',
						rules: 'required|valid_email|min_length[6]|max_length[50]'
					},{
						name: 'shopInfo.agentWebsite',  
						display: 'website',
						rules: 'required|valid_url'
					}], function(errors, evt) {
								var SELECTOR_ERRORS = $('.error_box'),
								SELECTOR_SUCCESS = $('.success_box');
								
							if (errors.length > 0) {
								SELECTOR_ERRORS.empty();
								for (var i = 0, errorLength = errors.length; i < errorLength; i++) {
									SELECTOR_ERRORS.append(errors[i].message + '<br />');
								}
								
								SELECTOR_SUCCESS.css({ display: 'none' });
								SELECTOR_ERRORS.fadeIn(200);
							} else {
								SELECTOR_ERRORS.css({ display: 'none' });
								SELECTOR_SUCCESS.fadeIn(200);
							}			
						});
					</script>
				</div>
				<div class="col-md-2"></div>
			</div>
		</div>
	</tiles:put>
</tiles:insert>
</html:html>
